<style lang="less">

</style>
<template>
    <div>
        <Drawer :closable="false" placement="right" v-model="drawerVisible" width="50%" :title="drawerTitle">
            <Row>
                <Col>
                    <Row>
                        <Form ref="form" :model="form" :label-width="70" :rules="formValidate" style="position:relative">
                            <FormItem label="姓名" prop="userName">
                                <Input v-model="form.userName" autocomplete="off"/>
                            </FormItem>
                            <FormItem label="工号" prop="jobNo">
                                <Input v-model="form.jobNo" autocomplete="off"/>
                            </FormItem>
                            <FormItem label="身份证号" prop="idCard">
                                <Input v-model="form.idCard" autocomplete="off"/>
                            </FormItem>
                            <Form-item label="部门" prop="deptId">
                                <department-tree-choose width="250px" @on-change="handleSelectDepTree" ref="depTree"></department-tree-choose>
                            </Form-item>
                            <FormItem label="手机" prop="mobile">
                                <Input v-model="form.mobile"/>
                            </FormItem>
                            <FormItem label="邮箱" prop="email">
                                <Input v-model="form.email"/>
                            </FormItem>
                            <FormItem label="性别" prop="sex">
                                <RadioGroup v-model="form.sex">
                                    <Radio :label="2">男</Radio>
                                    <Radio :label="1">女</Radio>
                                </RadioGroup>
                            </FormItem>
                            <FormItem label="入职时间" prop="hiredate">
                                <DatePicker type="datetime" format="yyyy-MM-dd HH:mm:ss"  @on-change="dataChange" :value="form.hiredate" style="width:300px" placeholder="请输入入职时间"></DatePicker>
                            </FormItem>
                            <Form-item class="br">
                                <Button type="primary" :loading="submitLoading" @click="handelSubmit" style="width:100px">提交</Button>
                                <Button @click="handelCancel">取消</Button>
                            </Form-item>
                            <Spin size="large" fix v-if="loading"></Spin>
                        </Form>
                    </Row>
                </Col>
            </Row>
        </Drawer>
    </div>
</template>
<script>
    import {staffInfo, editStaff, addStaff} from "@/api/bus";
    import departmentTreeChoose from "@/views/my-components/flyme/department-tree-choose";
    import {
        initDepartment,
        loadDepartment,
    } from "@/api/index";

    export default {
        name: "addStaff",
        components: {
            departmentTreeChoose,
        },
        data() {
            const validateMobile = (rule, value, callback) => {
                var reg = /^[1][3,4,5,6,7,8][0-9]{9}$/;
                if (!reg.test(value)) {
                    callback(new Error("手机号格式错误"));
                } else {
                    callback();
                }
            };
            return {
                type: 0,
                loading: false, // 表单加载状态
                selectUsers: [],
                drawerTitle: "添加员工",
                drawerVisible: false,
                department: [],
                selectDep: ["市场部"],
                form: {
                    sex: 2,
                    userType: 'UT_STUDENT',
                    avatar: "https://s1.ax1x.com/2018/05/19/CcdVQP.png",
                    roleIds: [],
                    deptName: "",
                    deptId: "",
                    content: "",
                    jobNo: "",
                    email: "",
                    id: "",
                    hiredate: "",
                    idCard: "",
                    mobile: "",
                    userName: ""
                },
                formValidate: {
                    userName: [
                        {required: true, message: "姓名不能为空", trigger: "blur"}
                    ],
                    mobile: [
                        {required: true, message: "手机号不能为空", trigger: "blur"},
                        {validator: validateMobile, trigger: "blur"}
                    ],
                    email: [
                        {required: false, message: "请输入邮箱地址"},
                        {type: "email", message: "邮箱格式不正确"}
                    ]
                },
                submitLoading: false, // 添加或编辑提交状态
            };
        },
        methods: {
            init() {
                // this.initEditor();
            },
            showDrawer(params) {
                if (params.id) {
                    this.type = 1;
                    this.drawerTitle = "编辑员工";
                    this.form.id = params.id;
                    this.getData();
                } else {
                    this.$refs.form.resetFields();
                    this.drawerTitle = "添加员工";
                    this.type = 0;
                }
                this.drawerVisible = true;
                this.initDepartmentData();
            },
            //查询-部门选择初始化
            initDepartmentData() {
                initDepartment().then(res => {
                    if (res.status === true) {
                        this.department = res.data;
                    }
                });
            },
            dataChange(data1,data2){
                this.form.hiredate = data1;
            },
            loadData(item, callback) {
                item.loading = true;
                loadDepartment(item.value).then(res => {
                    item.loading = false;
                    if (res.status === true) {
                        item.children = res.data;
                        callback();
                    }
                });
            },
            handleChangeDep(value, selectedData) {
                // 获取最后一个值
                if (value && value.length > 0) {
                    this.form.deptId = value[value.length - 1];
                    this.form.deptName = selectedData[0].label;
                } else {
                    this.form.deptId = "";
                    this.form.deptName = "";
                }
            },
            getData() {
                this.loading = true;
                staffInfo(this.form.id).then(res => {
                    this.loading = false;
                    if (res.status === true) {
                        this.form = res.data;
                        this.$refs.depTree.setSelectDep(res.data.deptId,res.data.deptName);
                    }
                });
            },
            handleSelectDepTree(v) {
                this.form.deptId = v;
            },
            handelSubmit() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.submitLoading = true;
                        if (this.type === 0) {
                            // 添加 避免编辑后传入id等数据 记得删除
                            delete this.form.id;
                            // 用户id数据
                            let ids = [];
                            this.selectUsers.forEach(e => {
                                ids.push(e.id);
                            });
                            this.form.lecturerId = ids;
                            addStaff(this.form).then(res => {
                                this.submitLoading = false;
                                if (res.status === true) {
                                    this.$Message.success("操作成功");
                                    this.$parent.getDataList();
                                    this.drawerVisible = false;
                                }
                            });
                        } else if (this.type === 1) {
                            // 编辑
                            if (!this.form.avatar) {
                                this.form.avatar = 'https://s1.ax1x.com/2018/05/19/CcdVQP.png';
                            }
                            editStaff(this.form).then(res => {
                                this.submitLoading = false;
                                if (res.status === true) {
                                    this.$Message.success("操作成功");
                                    this.$parent.getDataList();
                                    this.drawerVisible = false;
                                }
                            });
                        }
                    }
                });
            },
            handelCancel() {
                this.drawerVisible = false;
            },
            handleUpload(v) {
                this.form.avatar = v.fileUrl;
            }
        },
        mounted() {
            this.init();
        },
        watch: {}
    };
</script>